<template>
	<view class="alert">
		<u-popup :round="10" :safeAreaInsetBottom="false" :show="show" mode="center" @close="close">
			<view style="border-radius: 20rpx; ">

				<view class="title f32 bold">恭喜您获得新徽章称号</view>
				<view class="content">
					<image class="assistant-icon" :src="imageUrl"></image>
					<view class="name">{{name}}</view>
					<view class="remark">{{remark}}</view>
				</view>
				<view style=" margin: 10px  60rpx 48rpx 60rpx; ">
					<u-button :text="confirmText"
						custom-style="width: 360rpx;height: 72rpx;background: #FF9448;border-radius: 44rpx;color: white;"
						@click="confirm"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	/**
	 * 获得徽章
	 * 在创建观察，添加孩子的时候，显示获得的徽章
	 */
	export default {
		name: "rf-alertBadge",
		props: {
			show: {
				type: Boolean,
				required: true,
				default: false,
			},
			imageUrl: {
				type: String,
				required: false,
				default: ""
			},
			name: {
				type: String,
				required: false,
				default: ""
			},
			remark: {
				type: String,
				required: false,
				default: ""
			},
			confirmText: {
				type: String,
				required: false,
				default: "确定"
			}
		},
		data() {
			return {

			}
		},
		methods: {
			confirm() {
				this.$emit('confirm')
				this.$emit('close')
			},
			close() {
				console.log("close");
				this.$emit('close')
			}
		}
	}
</script>


<style lang="scss">
	.alert {
		width: 480rpx;
		// height: 600rpx;

		.title {

			font-size: 32rpx;
			font-weight: bold;
			color: #3A3D4B;
			line-height: 44rpx;
			text-align: center;
			margin-top: 40rpx;

		}

		.data-v-c4a74aee {
			font-size: 28rpx !important;
			color: #3A3D4B;
		}

		.u-checkbox__icon-wrap--circle.data-v-c4a74aee {
			width: 32rpx !important;
			height: 32rpx !important;
		}

		.content {

			margin-top: 20rpx;
			padding: 30rpx 28rpx;
			text-align: center;

			.assistant-icon {
				width: 226rpx;
				height: 322rpx;
			}

			.name {

				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: bold;
				color: #3A3D4B;
				line-height: 40rpx;
				text-align: center;

			}

			.remark {
				margin-top: 10rpx;
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #53586C;
				line-height: 34rpx;
				text-align: center;

			}
		}

		.assistant-btn {
			width: 244rpx;
			height: 72rpx;
		}
	}

	.popup {
		.u-popup__content.data-v-3a231fda {
			position: relative;
			border-radius: 24rpx 24rpx 0 0;
			overflow: hidden;
			padding-bottom: 150rpx;
		}

		.u-picker__view.data-v-f45a262e {
			height: 360rpx !important;
		}


		.u-toolbar__wrapper__cancel.data-v-55c89db1 {
			padding: 0;
			position: absolute;
			left: 100rpx;
			bottom: -78rpx;

			width: 200rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.u-toolbar__wrapper__confirm.data-v-55c89db1 {
			padding: 0;
			position: absolute;
			right: 100rpx;
			bottom: -78rpx;

			width: 200rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>